$sky-size: 2000;

@function generate-star($num) {
  $value: '#{random($sky-size)}px #{random($sky-size)}px #fff';
  @for $i from 1 through $num {
    $value: '#{$value}, #{random($sky-size)}px #{random($sky-size)}px #fff';
  }
  @return unquote($value);
}

.star,.medium-star,.big-star {
    position: absolute;
    top: 0;
    left: 0;
}
.star {

    width: 1px;
    height: 1px;
    background-color: transparent;
    box-shadow: generate-star(100);
    animation: animation 80s linear infinite;
}

.medium-star {
    width: 2px;
    height: 2px;
    background-color: transparent;
    box-shadow: generate-star(400);
    animation: animation 120s linear infinite;
}
.big-star {
    width: 3px;
    height: 3px;
    background-color: transparent;
    box-shadow: generate-star(100);
    animation: animation 150s linear infinite;
}

// @keyframes animation {
//     0% {
//         transform: translateY(0);
//     }
//     100% {
//         transform: translateY(unquote("-#{$sky-size}px"));
//     }
// }
@keyframes animation {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(unquote("-#{$sky-size}px"));
        opacity: 0;
    }
}